<template>
	<view class="">
		<view class="tab_box" v-if="show" :style="{position:is_fixed?'fixed':'relative'}" :class="{fixed_top:is_fixed}">
			<view class="tab_item" v-for="item,id in tab_list" :key="id" :class="{tab_item_on:id==current_tab}"
				@tap="select_tab(id)">{{rang_key?item[rang_key]:item}}</view>
			<view class="line" :style="{width:lineWidth,left:left+'rpx'}"></view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'tab-box',
		props: {
			tab_list: {
				type: Array,
				default: []
			},
			current_tab: {
				type: Number,
				default: 0
			},
			is_fixed: {
				type: Boolean,
				default: false
			},
			rang_key: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				lineWidth: 80,
				left: 0,
				// #ifdef APP
				top: 0,
				// #endif	
				// #ifdef H5
				top: '90rpx',
				// #endif
				show: false
			}
		},
		watch: {
			current_tab: function(num) {

				const width = 750;
				let tab_num = this.tab_list.length || 1;

				let pre_width = width / tab_num;
				this.left = (pre_width - this.lineWidth) / 2 + pre_width * num + 10; //4为误差值
			}
		},
		created() {
			this.show = false
			setTimeout(() => {
				const width = 750;
				let tab_num = this.tab_list.length;
				let pre_width = width / tab_num;
				this.left = (pre_width - this.lineWidth) / 2 + pre_width * this.current_tab + 10;
				this.show = true;
			}, 200)
			this.$emit('onTabClick', this.current_tab);
		},
		computed: {

		},
		methods: {
			select_tab: function(id) {
				this.$emit('onTabClick', id);
			}
		}
	}
</script>
<style>
	.line {
		width: 60rpx;
		height: 8rpx;

		background: #668BF6;
		border-radius: 4rpx;
		opacity: 1;
		bottom: 20rpx;
		left: -10rpx;
		position: absolute;
		transition: left .2s;
	}

	.tab_item {
		flex: 1;
		height: 99rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_item_on {
		font-weight: bold;

		color: #333;
	}

	.tab_box {
		width: 100%;
		background-color: #f8f8fe;
		height: 99rpx;
		display: flex;

		justify-content: space-around;
		align-items: center;
		position: relative;
		z-index: 20;

	}

	.fixed_top {
		/* padding-top: var(--status-bar-height); */
	}
</style>